import React, { useEffect, useState } from 'react'
import { Modal, Skeleton, Image, Divider } from 'antd';
import { showOrders } from '@/services/orders'
import { message } from 'antd';
import { GoogleSquareFilled } from '@ant-design/icons';
export default function OrderDetails(props) {
  const [initialValues, setInitialValues] = useState(undefined)
  const { isShowDetails, isDetailsVisible, actionRef, editId } = props
  useEffect(() => {
    const getOneOrder = async () => {
      const res = await showOrders(editId)
      console.log(res);
      let goods = []
      let orders = res.orderDetails.data;
      res.goods.data.map((i, index) => {
        let goodsItem = {}
        goodsItem.id = i.id
        goodsItem.title = i.title;
        goodsItem.cover_url = i.cover_url
        goodsItem.price = orders[index].price;
        goodsItem.num = orders[index].num;
        goods.push(goodsItem)
      })

      setInitialValues({
        user: res.user,
        goods,
        address_id: res.address_id
      })
    }
    getOneOrder()
  }, [])
  return (
    <Modal title="订单详情" visible={isDetailsVisible}
      onCancel={() => isShowDetails(false)} footer={null} destroyOnClose={true}>
      {
        //只有在编辑的情况下，并且要显示的数据还没有返回，才显示骨架屏
        initialValues === undefined && editId !== undefined ? <Skeleton active={true} paragraph={{ rows: 2 }} /> :
          <div className="box">
            <div className='user'>
              <p>
                <span className="username" style={{ marginRight: '100px' }}>姓名：{initialValues.user.name}</span>
                <span className="phone">邮箱：{initialValues.user.email}</span>
              </p>
              <p className="address">地址id：{initialValues.address_id}</p>
            </div>
            <Divider />
            {
              initialValues.goods.map(i => {
                return (
                  <div className="good" key={i.id}>
                    <div style={{display:'flex'}}>
                      <Image src={i.cover_url} width={100} height={100} />
                      <div className="info" style={{marginLeft:'50px'}}>
                        <p className="good_name">{i.title}</p>
                        <p className="details">单价：{i.price}&emsp;数量：{i.num}&emsp;总价：{i.price * i.num}</p>
                      </div>
                    </div>
                    <Divider />
                  </div>

                )
              })
            }
          </div>
      }
    </Modal>
  )
}
